<template>
  <div class="relative min-h-40">
    <div id="bjy-player-container" class="w-full"></div>
    <div class="absolute z-30 inset-0 right-0 bottom-0 text-base text-white font-bold" v-show="endMask">
      <div class="absolute inset-0 bg-dark-100 z-50">
        <div class="w-full h-full flex items-center justify-around">
          <div class="flex justify-center items-center" @click="resetSeek">
            <Icon class="text-2xl mr-1 text-white">
              <Replay10Round />
            </Icon>
            <span>重播</span>
          </div>
          <!-- <div class="flex justify-center items-center" @click="playNext">
            <Icon class="text-2xl mr-1">
              <PlayCircleOutlined />
            </Icon>
            <span>播放下一个</span>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Icon } from "@vicons/utils";
import { PlayCircleOutlined, Replay10Round } from "@vicons/material";
const props = defineProps({
  vid: {
    // 百家云后台视频id
    type: Number,
    default: "",
  },
  token: {
    // 视频id 对应token
    type: String,
    default: "",
  },
  seek: {
    // 播放器初始化后是否跳转到指定时间点，单位秒
    type: Number,
    default: 0,
  },
  sendQuestion: {
    // 弹题对象
    type: Array,
    default: [],
  },
  env: {
    // env环境
    type: String,
    default: "",
  },
  menory: {
    // 是否开启记忆播放
    type: Boolean,
    default: true,
  },
  enableDrag: {
    // 是否允许拖拽进度条
    type: Boolean,
    default: true,
  },
  maxWatchTime: {
    // 最大可拖拽观看时间，单位秒，时间点之前可以拖动，之后不可以拖动
    type: Number,
    default: 36,
  },
  audioMode: {
    // 默认音频播放，仅在上传视频时开启音频转码后可用
    type: Boolean,
    default: true,
  },
  theme: {
    // 主题色，默认值 #1795ff
    type: String,
    default: "",
  },
  rateList: {
    // 倍速列表
    type: Array,
    default: () => [0.5, 0.75, 1, 1.25, 1.5, 2],
  },
  logo: {
    // logo
    type: Object,
    default: () => {
      return {
        url: "", // logo 图片地址
        link: "", // logo 点击跳转地址
      };
    },
  },
  preload: {
    // 预加载，推荐设置 meta
    type: String,
    default: "meta",
  },
  volume: {
    // 默认音量设置 0 - 1
    type: Number,
    default: 0.75,
  },
  quality: {
    // 默认清晰度
    type: String,
    default: "superHD",
  },
  qualityList: {
    // 清晰度列表，将后台转码的清晰度再做一次过滤，可选值 low（标清），high（高清），superHD（超清），720p，1080p，默认为 [] 读取后台转出的所有清晰度
    type: Array,
    default: () => [],
  },
  autoplay: {
    // 自动播放
    type: Boolean,
    default: true,
  },
  disableEncrypt: {
    // 是否禁止播放加密
    type: Boolean,
    default: false,
  },
  enableAudioModeBtn: {
    // 显示音频播放按钮
    type: Boolean,
    default: true,
  },
  enableProtect: {
    // 显示护眼模式
    type: Boolean,
    default: true,
  },
  enableLoop: {
    // 显示循环播放
    type: Boolean,
    default: true,
  },
  enableSubtitle: {
    // 显示字幕按钮
    type: Boolean,
    default: true,
  },
  enableQuality: {
    // 显示清晰度
    type: Boolean,
    default: true,
  },
  enableSpeed: {
    // 显示倍速
    type: Boolean,
    default: true,
  },
  enableCdnSwitch: {
    // 是否支持CDN线路切换
    type: Boolean,
    default: true,
  },
  enableMarquee: {
    // 显示跑马灯
    type: Boolean,
    default: true,
  },
  marquee: {
    // 跑马灯配置
    type: Object,
    default: {
      displayMode: "roll", // 展示形式滚动roll 或者闪烁 blink
      rollDuration: 10, // 滚动间隔时长 单位秒
      blinkDuration: 10, // 闪烁间隔时长 单位秒
      type: 1, // 1 读取value设置的固定值 2 读取 user.name 昵称
      count: 1, // 跑马灯单双数 1 单数 2 双数
      color: "#ffffff", // 跑马灯颜色
      fontOpacity: 1, // 跑马灯透明度 0.01 - 1
      fontSize: 20, // 跑马灯字体大小 单位px
      fontBold: 0, //跑马灯文字加粗 0 不加粗 1 加粗
      backgroundColor: "#1795ff", // 跑马灯背景色 默认#1795ff
      backgroundOpacity: 1, // 跑马灯背景透明度 0.01 - 1
      position: "random", // 跑马灯位置 random 随机 top 顶部 bottom 底部
      value: "114141051用户正在观看", // 跑马灯固定值,
    },
  },
  enableWaterMark: {
    // 显示水印
    type: Boolean,
    default: true,
  },
  waterMark: {
    // 水印配置
    type: Object,
    default: () => {
      return {
        url: "", // 水印图片地址
        width: 120, // 水印宽度 单位px
        height: 40, // 水印高度 单位px
        opacity: 0.8, // 透明度 0 - 1
        position: "top-left", // 水印可设置四个角落定位 top-left || top-right || bottom-left || bottom-right
      };
    },
  },
  subtitle: {
    // 字幕配置
    type: Object,
    default: () => {
      return {
        url: "", // 字幕链接
        color: "", // 字幕颜色
        fontSize: 18, // 字幕字体大小单位px
        bottom: 64, // 距离播放器底部的距离 单位px
      };
    },
  },
  enableLogo: {
    // 显示logo
    type: Boolean,
    default: true,
  },
});
const bplayer = ref<any | null>(null);
const endMask = ref(false);
const emits = defineEmits(["replaceVideo", "resetSeek", "playNext", "ended"]);

// 事件对象
const eventTypes = {
  READY: "ready", // 播放器初始化完成
  FIRST_PLAY: "first_play", // 首次播放
  PLAYING: "playing", // 暂停后播放
  PAUSE: "pause", // 暂停
  SEEKING: "seeking", // 快进快退中
  WAITING: "waiting", // 加载中
  SEEKED: "seeked", // 快进快退结束
  ENDED: "ended", // 播放结束
  VOLUME_CHANGE: "volume_change", // 音量变化
  RATE_CHANGE: "rate_change", // 倍速变化
  TIMEUPDATE: "timeupdate", // 播放进度更新
  LOADEDMETADATA: "loadedmetadata", //
  QUALITY_CHANGE: "quality_change", // 切换清晰度
  ENDED_AD: "ended_ad", // 广告结束
  FULLSCREEN_CHANGE: "full_screen_change", // 全屏/退出全屏
  ERROR: "error", // 错误事件监听
};

// 监听vid + token变化，切换视频
watch([() => props.vid, () => props.token], (val) => {
  if (bplayer.value) {
    emits("replaceVideo", bplayer.value.currentTime, bplayer.value.duration); // 切换视频时，将当前播放时间传递给父组件
    disposed();
    initPlayer();
  }
});

// 注册bjy sdk 需要引入的文件
const insertScript = () => {
  const bplayerID = "bplayer-script";
  const ffplayerID = "ffplayer-script";
  let bplayerIDTag = document.getElementById(bplayerID);
  let ffplayerIDIDTag = document.getElementById(ffplayerID);
  const head = document.getElementsByTagName("head");
  let count = 0;
  const requestCount = () => {
    if (count >= 1) {
      initPlayer();
    } else {
      count++;
    }
  };

  if (!bplayerIDTag) {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://live-cdn.baijiayun.com/bplayer/latest/bplayer.js";
    script.id = bplayerID;
    head[0].appendChild(script);
    script.onload = () => {
      requestCount();
    };
  }
  if (!ffplayerIDIDTag) {
    const scriptComponent = document.createElement("script");
    scriptComponent.type = "text/javascript";
    scriptComponent.src = "https://live-cdn.baijiayun.com/bplayer/latest/dep/ffplayer.js";
    scriptComponent.id = ffplayerID;
    head[0].appendChild(scriptComponent);

    scriptComponent.onload = () => {
      requestCount();
    };
  }
};

// 初始化播放器
const initPlayer = () => {
  bplayer.value = new BPlayer({
    container: document.getElementById("bjy-player-container"), // 设置播放器初始化的父容器
    memory: props.menory, // 是否开启记忆播放
    enableDrag: props.enableDrag, // 是否允许拖拽进度条
    maxWatchTime: props.maxWatchTime, // 最大可拖拽观看时间，单位秒，时间点之前可以拖动，之后不可以拖动
    audioMode: props.audioMode, // 默认音频播放，仅在上传视频时开启音频转码后可用
    theme: props.theme, // 主题色，默认值 #1795ff
    rateList: props.rateList, // 倍速列表
    logo: props.logo, // logo
    preload: props.preload, // 预加载，推荐设置 meta
    volume: props.volume, // 默认音量设置 0 - 1
    quality: props.quality, // 默认清晰度
    qualityList: props.qualityList, // 清晰度列表，将后台转码的清晰度再做一次过滤，可选值 low（标清），high（高清），superHD（超清），720p，1080p，默认为 [] 读取后台转出的所有清晰度
    autoplay: props.autoplay, // 自动播放
    disableEncrypt: props.disableEncrypt, // 是否禁止播放加密
    enableAudioModeBtn: props.enableAudioModeBtn, // 显示音频播放按钮
    enableProtect: props.enableProtect, // 显示护眼模式
    enableLoop: props.enableLoop, // 显示循环播放
    enableSubtitle: props.enableSubtitle, // 显示字幕按钮
    enableQuality: props.enableQuality, // 显示清晰度
    enableSpeed: props.enableSpeed, // 显示倍速
    enableCdnSwitch: props.enableCdnSwitch, // 是否支持CDN线路切换
    enableMarquee: props.enableMarquee, // 显示跑马灯
    enableWaterMark: props.enableWaterMark, // 显示水印
    enableLogo: props.enableLogo, // 显示logo
    // 插件 不需要的插件可以删除
    plugins: {
      // 字幕
      subtitle: props.subtitle,
      // 跑马灯:
      marquee: props.marquee,
      // 水印
      waterMark: props.waterMark,
    },
    vid: props.vid, // 百家云后台视频id
    token: props.token, // 视频id 对应token
    env: props.env, // env环境
  });

  //监听播放器初始化完成，可在初始化后调用seek pause play 或者获取清晰度等方法
  bplayer.value?.on(eventTypes.READY, () => {
    bplayer.value?.seek(props.seek);
    bplayer.value?.sendQuestion(props.sendQuestion);
  });
  bplayer.value?.on("question_pop_up", (data) => {
    console.log("question_pop_up", data);
  });
  // 监听视频播放完成
  bplayer.value?.on(eventTypes.ENDED, () => {
    endMask.value = true;
    emits("ended");
  });
};

const getDuration = () => bplayer.value && bplayer.value.duration;
const getCurrentTime = () => bplayer.value && bplayer.value.currentTime;
const play = () => bplayer.value && bplayer.value.play();
const resetSeek = () => emits("resetSeek");
const playNext = () => emits("playNext");
const seek = (seconds) => bplayer.value && bplayer.value.seek(seconds);
const visibleEndMask = (bool: boolean) => (endMask.value = bool);
const disposed = () => bplayer.value && bplayer.value.destroy();
onMounted(() => {
  if (!window.BPlayer) {
    insertScript();
  } else {
    initPlayer();
  }
});

onUnmounted(() => {
  disposed();
});

defineExpose({ player: bplayer, getDuration, getCurrentTime, seek, play, visibleEndMask });
</script>
